<template>
  <view class="container">
    <!-- 顶部搜索和标题栏 -->
    <view class="header">
      <view class="title">生活服务</view>
      <view class="search-bar">
        <text class="search-icon iconfont icon-search"></text>
        <input type="text" class="search-input" placeholder="搜索生活服务（如餐饮、快递）" @tap="goToSearch" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.imageUrl" mode="aspectFill" class="banner-image" @tap="navigateToBanner(item)" />
      </swiper-item>
    </swiper>

    <!-- 主要功能区 -->
    <view class="service-section">
      <view class="section-title">
        <text>校园服务</text>
      </view>
      <view class="service-grid">
        <view class="service-item" v-for="(item, index) in mainServices" :key="index" @tap="navigateToService(item)">
          <view class="service-icon" :class="{'has-badge': item.hasBadge}">
            <image :src="item.iconUrl" mode="aspectFit"></image>
            <view class="badge" v-if="item.hasBadge"></view>
          </view>
          <text class="service-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 校园餐饮 -->
    <view class="food-section">
      <view class="section-header">
        <view class="section-title">
          <text>校园餐饮</text>
        </view>
        <view class="more-link" @tap="navigateToMore('food')">
          <text>更多</text>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      
      <scroll-view scroll-x class="food-scroll" show-scrollbar="false">
        <view class="food-card" v-for="(item, index) in foodServices" :key="index" @tap="navigateToFoodDetail(item)">
          <image :src="item.imageUrl" mode="aspectFill" class="food-image"></image>
          <view class="food-info">
            <view class="food-name">{{ item.name }}</view>
            <view class="food-desc">{{ item.description }}</view>
            <view class="food-price">¥{{ item.price }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
          
    <!-- 校园活动 -->
    <view class="activities-section">
      <view class="section-header">
        <view class="section-title">
          <text>校园活动</text>
        </view>
        <view class="more-link" @tap="navigateToMore('activities')">
          <text>更多</text>
          <text class="iconfont icon-right"></text>
        </view>
          </view>
          
      <view class="activity-list">
        <view class="activity-item" v-for="(item, index) in activities" :key="index" @tap="navigateToActivityDetail(item)">
          <image :src="item.imageUrl" mode="aspectFill" class="activity-image"></image>
          <view class="activity-info">
            <view class="activity-name">{{ item.name }}</view>
            <view class="activity-time">{{ item.time }}</view>
            <view class="activity-location">{{ item.location }}</view>
            <view class="activity-status" :class="{'status-ongoing': item.status === 'ongoing', 'status-upcoming': item.status === 'upcoming', 'status-ended': item.status === 'ended'}">
              {{ getStatusText(item.status) }}
            </view>
          </view>
              </view>
            </view>
              </view>

    <!-- 二手交易 -->
    <view class="marketplace-section">
      <view class="section-header">
        <view class="section-title">
          <text>二手交易</text>
            </view>
        <view class="more-link" @tap="navigateToMore('marketplace')">
          <text>更多</text>
          <text class="iconfont icon-right"></text>
              </view>
            </view>
            
      <view class="marketplace-grid">
        <view class="marketplace-item" v-for="(item, index) in marketplaceItems" :key="index" @tap="navigateToMarketplaceDetail(item)">
          <image :src="item.imageUrl" mode="aspectFill" class="marketplace-image"></image>
          <view class="marketplace-info">
            <view class="marketplace-name">{{ item.name }}</view>
            <view class="marketplace-price">¥{{ item.price }}</view>
          </view>
        </view>
      </view>
          </view>
          
    <!-- 常用服务快捷入口 -->
    <view class="quick-access">
      <view class="section-title">
        <text>常用服务</text>
            </view>
      <view class="quick-access-grid">
        <view class="quick-access-item" v-for="(item, index) in quickAccessServices" :key="index" @tap="navigateToQuickAccess(item)">
          <view class="quick-access-icon">
            <image :src="item.iconUrl" mode="aspectFit"></image>
          </view>
          <text class="quick-access-name">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        {
          id: 1,
          imageUrl: 'http://101.37.17.240:9000/zhxy/banner1.jpg',
          link: '/pages/life/activities/detail?id=1',
          title: '校园文化节'
        },
        {
          id: 2,
          imageUrl: 'http://101.37.17.240:9000/zhxy/banner2.jpg',
          link: '/pages/life/food/promotion',
          title: '食堂新品推荐'
        },
        {
          id: 3,
          imageUrl: 'http://101.37.17.240:9000/zhxy/banner3.jpg',
          link: '/pages/life/facilities/library',
          title: '图书馆服务'
        }
      ],
      // 主要服务数据
      mainServices: [
        {
          id: 1,
          name: '校园餐饮',
          iconUrl: 'http://101.37.17.240:9000/zhxy/food-icon.png',
          path: '/pages/life/food/index',
          hasBadge: false
        },
        {
          id: 2,
          name: '快递服务',
          iconUrl: 'http://101.37.17.240:9000/zhxy/express-icon.png',
          path: '/pages/life/express/index',
          hasBadge: true
        },
        {
          id: 3,
          name: '校园活动',
          iconUrl: 'http://101.37.17.240:9000/zhxy/activity-icon.png',
          path: '/pages/life/activities/index',
          hasBadge: false
        },
        {
          id: 4,
          name: '二手交易',
          iconUrl: 'http://101.37.17.240:9000/zhxy/market-icon.png',
          path: '/pages/life/marketplace/index',
          hasBadge: false
        },
        {
          id: 5,
          name: '校园地图',
          iconUrl: 'http://101.37.17.240:9000/zhxy/map-icon.png',
          path: '/pages/life/map/index',
          hasBadge: false
        },
        {
          id: 6,
          name: '校园缴费',
          iconUrl: 'http://101.37.17.240:9000/zhxy/payment-icon.png',
          path: '/pages/life/payment/index',
          hasBadge: false
        },
        {
          id: 7,
          name: '失物招领',
          iconUrl: 'http://101.37.17.240:9000/zhxy/lost-found-icon.png',
          path: '/pages/life/lost-found/index',
          hasBadge: false
        },
        {
          id: 8,
          name: '更多服务',
          iconUrl: 'http://101.37.17.240:9000/zhxy/more-icon.png',
          path: '/pages/life/more/index',
          hasBadge: false
        }
      ],
      // 餐饮服务数据
      foodServices: [
        {
          id: 1,
          name: '红烧牛肉饭',
          description: '来自第一食堂 • 限量供应',
          price: 15.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/food1.jpg'
        },
        {
          id: 2,
          name: '番茄意面',
          description: '来自第二食堂 • 热销',
          price: 12.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/food2.jpg'
        },
        {
          id: 3,
          name: '黄焖鸡米饭',
          description: '来自第一食堂 • 推荐',
          price: 14.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/food3.jpg'
        },
        {
          id: 4,
          name: '麻辣香锅',
          description: '来自第三食堂 • 热销',
          price: 18.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/food4.jpg'
        }
      ],
      // 校园活动数据
      activities: [
        {
          id: 1,
          name: '校园歌手大赛',
          time: '2023-12-15 19:00',
          location: '大学生活动中心',
          status: 'upcoming',
          imageUrl: 'http://101.37.17.240:9000/zhxy/activity1.jpg'
        },
        {
          id: 2,
          name: '程序设计竞赛',
          time: '2023-12-10 14:00',
          location: '计算机科学楼',
          status: 'ongoing',
          imageUrl: 'http://101.37.17.240:9000/zhxy/activity2.jpg'
        },
        {
          id: 3,
          name: '文学讲座',
          time: '2023-12-05 15:30',
          location: '图书馆报告厅',
          status: 'ended',
          imageUrl: 'http://101.37.17.240:9000/zhxy/activity3.jpg'
        }
      ],
      // 二手交易数据
      marketplaceItems: [
        {
          id: 1,
          name: '数据结构与算法教材',
          price: 20.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/book1.jpg'
        },
        {
          id: 2,
          name: '自行车',
          price: 250.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/bike.jpg'
        },
        {
          id: 3,
          name: '台灯',
          price: 35.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/lamp.jpg'
        },
        {
          id: 4,
          name: '排球',
          price: 40.00,
          imageUrl: 'http://101.37.17.240:9000/zhxy/volleyball.jpg'
        }
      ],
      // 快捷入口服务
      quickAccessServices: [
        {
          id: 1,
          name: '我的订单',
          iconUrl: 'http://101.37.17.240:9000/zhxy/order-icon.png',
          path: '/pages/life/orders/index'
        },
        {
          id: 2,
          name: '我的快递',
          iconUrl: 'http://101.37.17.240:9000/zhxy/my-express-icon.png',
          path: '/pages/life/express/my'
        },
        {
          id: 3,
          name: '活动收藏',
          iconUrl: 'http://101.37.17.240:9000/zhxy/favorite-icon.png',
          path: '/pages/life/activities/favorite'
        },
        {
          id: 4,
          name: '我的发布',
          iconUrl: 'http://101.37.17.240:9000/zhxy/publish-icon.png',
          path: '/pages/life/marketplace/my'
        }
      ]
      }
    },
  methods: {
    // 导航到搜索页面
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/index?type=life'
      });
    },
    
    // 导航到轮播图内容
    navigateToBanner(item) {
      uni.navigateTo({
        url: item.link
      });
    },
    
    // 导航到服务详情
    navigateToService(item) {
      uni.navigateTo({
        url: item.path
      });
    },
    
    // 导航到更多页面
    navigateToMore(type) {
      const pathMap = {
        'food': '/pages/life/food/index',
        'activities': '/pages/life/activities/index',
        'marketplace': '/pages/life/marketplace/index'
      };
      
      uni.navigateTo({
        url: pathMap[type] || '/pages/life/more/index'
      });
    },
    
    // 导航到食品详情
    navigateToFoodDetail(item) {
      uni.navigateTo({
        url: `/pages/life/food/detail?id=${item.id}`
      });
    },
    
    // 导航到活动详情
    navigateToActivityDetail(item) {
      uni.navigateTo({
        url: `/pages/life/activities/detail?id=${item.id}`
      });
    },
    
    // 导航到二手商品详情
    navigateToMarketplaceDetail(item) {
      uni.navigateTo({
        url: `/pages/life/marketplace/detail?id=${item.id}`
      });
    },
    
    // 导航到快捷入口
    navigateToQuickAccess(item) {
      uni.navigateTo({
        url: item.path
      });
    },
    
    // 获取活动状态文字
    getStatusText(status) {
      const statusMap = {
        'upcoming': '即将开始',
        'ongoing': '进行中',
        'ended': '已结束'
      };
      
      return statusMap[status] || '未知状态';
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

// 顶部样式
.header {
  background-color: #4080ff;
  padding: 20rpx 30rpx 30rpx;
  position: relative;
  
  .title {
        color: #fff;
    font-size: 36rpx;
        font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }
  
  .search-bar {
    height: 70rpx;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;

    .search-icon {
      font-size: 40rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .search-input {
      flex: 1;
      height: 70rpx;
      font-size: 28rpx;
      color: #333;
      }
    }
  }

// 轮播图样式
.banner {
  height: 300rpx;

  .banner-image {
    width: 100%;
    height: 100%;
  }
}

// 服务区域样式
.service-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    margin-bottom: 20rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .service-grid {
    display: flex;
    flex-wrap: wrap;

    .service-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      
      .service-icon {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        margin-bottom: 10rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .badge {
          position: absolute;
          top: -6rpx;
          right: -6rpx;
          width: 20rpx;
          height: 20rpx;
        border-radius: 50%;
          background-color: #ff4d4f;
        }
      }
      
      .service-name {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}

// 食品区域样式
.food-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
        display: flex;
    justify-content: space-between;
        align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .more-link {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #4080ff;
      }
      
      .iconfont {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
        }
      }
      
  .food-scroll {
    white-space: nowrap;
    
    .food-card {
      display: inline-block;
      width: 300rpx;
      margin-right: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      &:last-child {
        margin-right: 0;
      }
      
      .food-image {
        width: 300rpx;
        height: 200rpx;
      }
      
      .food-info {
        padding: 16rpx;
        
        .food-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .food-desc {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .food-price {
          font-size: 28rpx;
          color: #ff6b00;
          font-weight: bold;
      }
    }
  }
  }
}

// 活动区域样式
.activities-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #4080ff;
      }
      
      .iconfont {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
    }
  }
  
  .activity-list {
    .activity-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      
      &:first-child {
        padding-top: 0;
    }
    
      .activity-image {
        width: 200rpx;
        height: 130rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .activity-info {
        flex: 1;
        position: relative;
        
        .activity-name {
        font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
}

        .activity-time, .activity-location {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 6rpx;
}

        .activity-status {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 22rpx;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          
          &.status-ongoing {
            background-color: rgba(82, 196, 26, 0.1);
            color: #52c41a;
          }
          
          &.status-upcoming {
            background-color: rgba(24, 144, 255, 0.1);
            color: #1890ff;
          }
          
          &.status-ended {
            background-color: rgba(153, 153, 153, 0.1);
            color: #999;
          }
        }
      }
    }
  }
}

// 二手交易区域样式
.marketplace-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .more-link {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #4080ff;
    }

      .iconfont {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
    }
  }
  
  .marketplace-grid {
      display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;
    
    .marketplace-item {
      width: calc(50% - 20rpx);
      margin: 10rpx;
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      
      .marketplace-image {
        width: 100%;
        height: 200rpx;
      }
      
      .marketplace-info {
        padding: 16rpx;
        
        .marketplace-name {
          font-size: 28rpx;
          color: #333;
      margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .marketplace-price {
          font-size: 28rpx;
          color: #ff6b00;
          font-weight: bold;
      }
    }
  }
}
}

// 快捷入口样式
.quick-access {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    margin-bottom: 20rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .quick-access-grid {
    display: flex;
    justify-content: space-between;
    
    .quick-access-item {
      width: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .quick-access-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
  }
  
      .quick-access-name {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style> 